<template>
	<view class="woupload">
		<view class="ag-topbg"></view>
		<view class="woupload-card">
			<view class="woupload-card__body">
				<textarea class="woupload-card__remark" :value="imgRemark" placeholder="描述" @input="onRemarkInput"></textarea>
				<view class="woupload-imglist">
					<view :class="['woupload-imglist__item', (picIndex + 1)%3 === 0 ?'nomargin':'' ]" v-for="(picItem, picIndex) in WoItemPictures" :key="picIndex">
						<image :src="getImageBase64(picItem)" :data-picItem="picItem" @click.stop="deleteClick" />
					</view>
					<view class="woupload-imglist__add" @click.stop="addImgClick">
						<image src="../../static/img/icon-big-add.png" />
					</view>
				</view>
				<view class="woupload-pos">
					<image class="woupload-pos__location" src="../../static/img/icon-location.png" />
					<text class="woupload-pos__label">所在位置</text>
					<view class="woupload-pos__value">{{currAddress}}</view>
					<image class="woupload-pos__arrowright" src="../../static/img/icon-arrowright-black.png" />
				</view>
			</view>

			<view class="woupload-card__footer">
				<button class="cu-btn lg primary" @click="upImgClick">上传</button>
				<button class="cu-btn lg primary plain" @click="cancelClick">取消</button>
			</view>

		</view>
	</view>
</template>
<script>
	import AGInput from '../../components/AGInput';
	import wouploadbehavior from './wouploadbehavior'

	export default {
		components: {
			AGInput
		},
		data() {
			return {
				wOrderId: '',
				imgTempPathList: [],
				WoItemPictures: [],
				imgRemark: '',
				currAddress: ''
			}
		},
		mixins: [wouploadbehavior],
		onLoad(e) {
			this.GetImgwOrderLoad();
			this.GetUserLocation();
		},
		onShow(e) {
           
		},
		methods: {
			cancelClick(e) {
				uni.navigateBack();
			},
			onRemarkInput(e) {
				this.imgRemark = e.detail.value;
			},
			deleteClick(e) {
				let picitem = e.currentTarget.dataset.picitem;
				uni.showActionSheet({
					itemList: ['删除'],
					success: (res) => {
						if (res.tapIndex === 0) {
	                       this.removeDispalyImg(picitem)
						}
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			
			removeDispalyImg(picitem){
				if(picitem.hasOwnProperty("ImageId") && picitem.ImageId){
					let deleteIndex = this.WoItemPictures
						.findIndex((item, index, arra) => {
							return item.ImageId === picitem.ImageId
						});
				    if(deleteIndex>-1){
						let deleteImgs = new Array();
						deleteImgs.push({
							ImageId:picitem.ImageId
						})
						this.WOPictureDeleteInBatchAsync(deleteImgs).then((success)=>{
							let {RetBool,RetMsg} = success;
							if(RetBool){
							   this.WoItemPictures.splice(deleteIndex, 1);
							   uni.$emit("reLoadInstall");
							}else{
								uni.showToast({
									title:RetMsg
								})
							}
						})
					}
				}else {
					let deleteIndex = this.WoItemPictures
						.findIndex((item, index, arra) => {
							return item.Title === picitem.Title
						});
					this.WoItemPictures.splice(deleteIndex, 1);
				}
			},

			addImgClick(e) {
				
				console.log(e)
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.showLoading({
							mask:true
						})
						for (let tempFileIndex in res.tempFilePaths) {
							let imgTempPath = res.tempFilePaths[tempFileIndex];
							let filextIndex = imgTempPath.lastIndexOf(".");
							let filext = imgTempPath.substr(filextIndex);
							let imgbase64 = this.imagePathToBase64(imgTempPath);

							let upImgItem = {
								FileContent: imgbase64,
								//ImageContent: imgbase64,
								FileType: ".jpeg",
								Ticket: Date.now(),
								Title: `现场图片${this.WoItemPictures.length+1}`,
								Description: this.imgRemark
							};
							this.WoItemPictures.push(upImgItem);
							console.log(this.WoItemPictures)
							//debugger;
							uni.hideLoading();
						}
					}
				});
			},

			upImgClick(e) {
				let upPics = this.WoItemPictures.filter((item, index, arra) => {
					return !item.hasOwnProperty("ImageId")
				});
				//debugger
				if(upPics && upPics.length>0)
				{
					uni.showLoading({
						mask: true
					})
					for(let picIndex in upPics){
						upPics[picIndex].Description = this.imgRemark
					}
					this.WOPictureUploadInBatchAsync(upPics).then((success) => {
						let {RetBool,RetMsg} = success;
						if (RetBool) {
							this.GetImgwOrderReLoad();
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								title: `上传失败${RetMsg}`
							})
						}
						console.log(success);
					}, (error) => {
						console.log(error);
						uni.hideLoading();
					})
				}else{
					uni.showToast({
						title:"没有需要上传的图片",
						icon: "none",
						mask:true
					})
				}
				
			},
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
